<template>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="width: 35%;margin: 50px auto;">
        <el-form-item label="当前用户" prop="user_name">
            <el-input v-model="commitUser.user_name" disabled></el-input>
        </el-form-item>
        <el-form-item label="原密码" prop="user_oldPwd">
            <el-input type="password" v-model="ruleForm.user_oldPwd" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="user_password">
            <el-input type="password" v-model="ruleForm.user_password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="user_passwordChecked">
            <el-input type="password" v-model="ruleForm.user_passwordChecked" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import {md5} from "../MD5"
  export default {
    data() {
      
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.user_passwordChecked !== '') {
            this.$refs.ruleForm.validateField('user_passwordChecked');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.user_password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };

      var checkedOldPwd = (rule , value ,callback)=>{
        console.log(md5(value));
          if(value === ''){
              callback(new Error('请先输入原密码'));
          }else if (md5(value) !== this.oldPassword) {
          callback(new Error('原密码不正确!'));
        } else {
          callback();
        }


      };



      return {

        oldPassword:"",
        
        ruleForm: {
          user_oldPwd:"",
          user_password: '',
          user_passwordChecked: ''
        },
        commitUser:{
            user_name:"",
            user_password: '',
            user_id: '',
        },
        rules: {
          user_oldPwd:[
              {validator:checkedOldPwd , trigger: 'blur'}
          ],

          user_password: [
            { validator: validatePass,trigger: 'blur' },
            { min:6,max:32,message:"密码长度在6～32位" ,trigger: 'blur' }
          ],
          user_passwordChecked: [
            { validator: validatePass2,trigger: 'blur' },
            { min:6,max:32,message:"密码长度在6～32位" ,trigger: 'blur' }
          ],
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
            
          if (valid) {
            this.commitUser.user_password = md5(this.ruleForm.user_passwordChecked);  
            this.$axios.put("/users",this.commitUser)
            .then(resp=>{
                if(resp.data.status==1000){
                    this.$confirm('修改密码成功,请点击确认重新登录', '提示', {
                        confirmButtonText: '确定',
                        type: 'success'
                        }).then(() => {
                            this.$router.push("/");
                        }).catch(() => {
                            this.$router.push("/");    
                    });
                }else{
                    this.$message({
                        type: 'error',
                      message: '修改密码失败!'
                    });
                }
            }).catch(error=>{

            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
    mounted(){
    
        // 从session中获取当前登录者的user_name
        this.commitUser.user_name = sessionStorage.getItem("user_name");
        // 从session中获取当前登录者的user_id
        this.commitUser.user_id = sessionStorage.getItem("user_id");
        // 从session中获取当前登录者的user_password
        this.oldPassword = sessionStorage.getItem("user_password");
    }
  }
</script>
